<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>综合案例</title>
        <style>
            .list {
                border: 1px solid blue;
            }
            .list .item {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #dfdfdf;
                line-height: 30px;
            }
            .list .item:last-child {
                border-bottom: none;
            }
            .list .item>* {
                flex-basis: 30%;
            }
        </style>
    </head>
    <body>

        <h3>综合案例</h3>

        <div class="root">
            <div v-if="pandas && pandas.length > 0" class="list">
                <div v-for="(panda,index) in pandas" v-bind:key="panda.id" class="item">
                    <span>{{ index + 1 }}</span>
                    <span>{{ panda.name }}</span>
                    <span>
                        <!-- 通过 v-on 为元素绑定点击事件监听器 -->
                        <button v-on:click="remove(panda.id)">删除</button>
                    </span>
                </div>
            </div>
            <div v-else>
                暂无数据
            </div>
        </div>

        <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

        <script type="text/javascript">
            const options = {
                data(){
                    return {
                        pandas: [
                            { id: 21 , name: '小美' },
                            { id: 19 , name: '大美' },
                            { id: 25 , name: '小圆' },
                            { id: 22 , name: '大圆' },
                            { id: 12 , name: '小团' },
                            { id: 17 , name: '大团' }
                        ]
                    }
                },
                methods: {
                    remove(pandaId) {
                        console.log( 'panda id : ' , pandaId );
                        // 根据 pandaId 从 数组中寻找 相匹配元素 的索引
                        let index = this.pandas.findIndex( p => p.id == pandaId );
                        // 从数组中删除 index 处的 单个 元素
                        this.pandas.splice( index , 1 );
                    }
                }
            }
            Vue.createApp(options).mount('.root');
        </script>
        
    </body>
</html>